<template>
	<el-dialog
	  v-model="dialogVisible"
	  :title="workflowStore.state.nodePortMenu.port?.name || '默认标题'"
	  destroy-on-close
	  :append-to-body="false"
	  width="550px"
	  class="editor-dialog-c"
	  @close="resetForm"
	  draggable
	  :close-on-click-modal="false"
	  v-if="workflowStore.state.nodePortMenu.port?.type!='exec' 
	  && workflowStore.state.nodePortMenu.port?.fieldType!='JSONObject' "
	>
      <el-form
        ref="formRef"
        :model="formData"
        label-width="150px"
		:rules="rules"
      >
		<el-form-item :label="`${workflowStore.state.nodePortMenu.port?.name || ''}类型`" prop="fieldType" v-if="workflowStore.state.nodePortMenu.port?.fieldType === 'any'">
			<Dict v-model="formData.fieldType" code="blueprint_node_field_type" style="width: 100%;" />
		</el-form-item>
		
		<el-form-item :label="`${workflowStore.state.nodePortMenu.port?.name || ''}值`" prop="value" v-if="showDefaultValueInput">
		    <!-- 数字类型输入 -->
		    <el-input-number 
		      v-if="['int', 'float', 'double'].includes(workflowStore.state.nodePortMenu.port?.fieldType || '')"
		      v-model="formData.value"
		      :precision="getPrecision()"
		      :placeholder="`请输入${workflowStore.state.nodePortMenu.port?.name || ''}值`"
		    />
		    <!-- 布尔类型选择 -->
		    <el-select
		      v-else-if="workflowStore.state.nodePortMenu.port?.fieldType === 'bool'"
		      v-model="formData.value"
		    >
		      <el-option label="是" value="true" />
		      <el-option label="否" value="false" />
		    </el-select>
		    <!-- 日期选择 -->
		    <el-date-picker
		      v-else-if="workflowStore.state.nodePortMenu.port?.fieldType === 'date'"
		      v-model="formData.value"
		      type="datetime"
		      :placeholder="`请选择${workflowStore.state.nodePortMenu.port?.name || ''}时间`"
		    />
		    <!-- 其他类型默认文本输入 -->
		    <el-input
		      v-else
		      v-model="formData.value"
		      :placeholder="`请输入${workflowStore.state.nodePortMenu.port?.name || ''}值`"
		    />
		</el-form-item>
		
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="close">取 消</el-button>
        </div>
      </template>
	</el-dialog>
</template>

<script setup lang="ts">
	
	import { ref, computed, watch } from 'vue';
	import type { WorkflowNode as FlowNode } from '@/stores/workflow';
	import { useWorkflowStore } from '@/stores/workflow';
	import { v4 as uuidv4 } from 'uuid';
	import { ElMessage } from 'element-plus';
	import { onMounted } from 'vue';
	import type { FormInstance } from 'element-plus';
	
	const props = defineProps<{
	  svgContainer: SVGSVGElement;
	}>();
	const formRef = ref<FormInstance>();
	const workflowStore = useWorkflowStore();
	const visible = ref<boolean>(false);
	const targetNode = ref<FlowNode | undefined>();
	let svgContainer = ref<SVGSVGElement | null>(null);
	
	const formData=ref<any>({
		value: undefined,
		fieldType:''
	})
	
	const rules = {
	  fieldType: [{ 
	    required: true, 
	    message: () => `请选择${workflowStore.state.nodePortMenu.port?.name || ''}类型`, 
	    trigger: 'change' 
	  }],
	};

	const dialogVisible = computed({
	  get: () => workflowStore.state.nodePortMenu.visible,
	  set: (value) => workflowStore.state.nodePortMenu.visible = value
	});
	
	const submitForm = async () => {
	  if (!formRef.value) return;
	  await formRef.value.validate();
	  workflowStore.incrementVersion();
	  
	  if (workflowStore.state.nodePortMenu.port) {
		if(formData.value.fieldType){
			workflowStore.state.nodePortMenu.port.fieldType = formData.value.fieldType;
		}
		if(formData.value.value!=undefined){
			workflowStore.state.nodePortMenu.port.value = formData.value.value;
		}
	  }
	  resetForm();
	};
	
	const close=()=>{
		workflowStore.hideNodePortMenu();
	}
	
	function resetForm() {
		formData.value.value = undefined;
		formData.value.fieldType='';
		close();
	}
	
	watch(() => workflowStore.state.nodePortMenu, (newValue) => {
	  if (newValue.visible && newValue.port) {
	    targetNode.value = newValue.node || undefined;
	    svgContainer.value = props.svgContainer;
	  }
	}, { deep: true });
	

	
	// 计算是否显示默认值输入
	const showDefaultValueInput = computed(() => {
	  const fieldType = workflowStore.state.nodePortMenu.port?.fieldType;
	  return fieldType && !['any', 'JSONObject'].includes(fieldType) ;
	});
	
	// 获取数字类型的精度
	const getPrecision = () => {
	  const fieldType = workflowStore.state.nodePortMenu.port?.fieldType;
	  switch (fieldType) {
	    case 'int': return 0;
	    case 'float': return 2;
	    case 'double': return 4;
	    default: return 0;
	  }
	};
	
	watch(() => workflowStore.state?.nodePortMenu?.port, (newPort) => {
		if (newPort) {
			formData.value.value = newPort.value;
		}
	}, { deep: true });
	
	onMounted(() => {
	
	});
	
</script>

<style lang="scss" scoped>
.menu-container {
  pointer-events: all;
}

.context-menu {
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  background-color: #252526;
  .menu-item {
    padding: 8px 16px;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    font-size: 12px;
    line-height: 1.5;
    
    &:hover {
      background: rgba(64, 158, 255, 0.1);
      color: #409EFF;
    }
    
    &.disabled {
      color: #666;
      cursor: not-allowed;
      
      &:hover {
        background: none;
        color: #666;
      }
    }
  }
}
</style> 